<!--Hilight-->
<div id="playlist_hilight">
	<div class="hilight">
		<script type='text/javascript'>
		<!--//<![CDATA[
		   var m3_u = (location.protocol=='https:'?'https://ads.you2play.com/openx/delivery/ajs.php':'http://ads.you2play.com/openx/delivery/ajs.php');
		   var m3_r = Math.floor(Math.random()*99999999999);
		   if (!document.MAX_used) document.MAX_used = ',';
		   document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
		   document.write ("?zoneid=172");
		   document.write ('&amp;cb=' + m3_r);
		   if (document.MAX_used != ',') document.write ("&amp;exclude=" + document.MAX_used);
		   document.write (document.charset ? '&amp;charset='+document.charset : (document.characterSet ? '&amp;charset='+document.characterSet : ''));
		   document.write ("&amp;loc=" + escape(window.location));
		   if (document.referrer) document.write ("&amp;referer=" + escape(document.referrer));
		   if (document.context) document.write ("&context=" + escape(document.context));
		   if (document.mmm_fo) document.write ("&amp;mmm_fo=1");
		   document.write ("'><\/scr"+"ipt>");
		//]]>-->
		</script>
		<noscript><a href='http://ads.you2play.com/openx/delivery/ck.php?n=a6c3a65e&amp;cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://ads.you2play.com/openx/delivery/avw.php?zoneid=172&amp;cb=INSERT_RANDOM_NUMBER_HERE&amp;n=a6c3a65e' border='0' alt='' /></a></noscript>	
	</div>
	<div id="modernSlider">
		<?php foreach($dataPlaylistHilight as $key => $value):?>
			<a href="javascript:void(0);">
				<?php if(empty($value->member_id)):?>
					<div class="image">
						<?php echo exec_image(array(
							'folder' => 'playlist',
							'dimension' => '265x120',
							'file_name' => $value->playlist_file_name.'.'.$value->playlist_file_ext,
							'alt' => $value->playlist_name,	
							'title' => $value->playlist_name,
							'id' => (empty($value->member_id) ? 'You2Play-'.$value->playlist_alias:'Member-'.$value->playlist_alias)
						));?>								
					</div>
				<?php else:?>
					<div class="image">
						<?php echo image_asset('playlist/'.$value->playlist_file_name.'.'.$value->playlist_file_ext,'',array('width' => 265,'height' => 120));?>
					</div>
				<?php endif;?>					
				<div class="info" <?php echo ($key > 0 ? 'style="display: none;"':'');?>>
					<?php echo $value->playlist_name;?>
				</div>				
			</a>
		<?php endforeach;?>
		<a href="javascipt:void(0);" class="btn_arrow prev"></a>
		<a href="javascipt:void(0);" class="btn_arrow next"></a>
	</div>
</div>
<div id="playlist">
	<!--เพลลิสย์มาใหม่-->
	<div class="block">
		<div class="header">
			<h2>สถานีมาใหม่</h2>
			<a href="<?php echo $playlist_url."category/new";?>" class="readMore">all&raquo;</a>
		</div>
		<div id="slider1" class="sliderContent">
			<div class="slider">
				<ul>
					<?php foreach($dataPlaylistNew as $value):?>
						<li>
						<a class="_player" href="<?php echo $playlist_url.(empty($value->member_id) ? 'you2play/':'member/').$value->playlist_alias;?>" target="_blank">
							<?php if(empty($value->member_id)):?>
								<div class="image">
									<?php echo exec_image(array(
										'folder' => 'playlist',
										'dimension' => '265x120',
										'file_name' => $value->playlist_file_name.'.'.$value->playlist_file_ext,
										'alt' => $value->playlist_name,	
										'title' => $value->playlist_name
									));?>			
								</div>
							<?php else:?>
								<div class="image">
									<?php echo image_asset('playlist/'.$value->playlist_file_name.'.'.$value->playlist_file_ext,'',array('width' => 265,'height' => 120));?>
								</div>
							<?php endif;?>
							<div class="info">
								<?php echo $value->playlist_name;?>
							</div>
						</a>
						</li>
					<?php endforeach;?>
				</ul>
			</div>
			<a href="javascript:void(0);" class="btn_arrow prev" id="cycleElementsLeft1"></a>
			<a href="javascript:void(0);" class="btn_arrow next" id="cycleElementsRight1"></a>
		</div>		
	</div>
	<!--เพลลิสย์แนะนำ-->
	<div class="block">
		<div class="header">
			<h2>สถานีแนะนำ</h2>
			<a href="<?php echo $playlist_url."category/recommend";?>" class="readMore">all&raquo;</a>
		</div>
		<div id="slider2" class="sliderContent">
			<div class="slider">
				<ul>
					<?php foreach($dataPlaylistRecommend as $value):?>
						<li>
						<a class="_player" href="<?php echo $playlist_url.(empty($value->member_id) ? 'you2play/':'member/').$value->playlist_alias;?>" target="_blank">
							<?php if(empty($value->member_id)):?>
								<div class="image">
									<?php echo exec_image(array(
										'folder' => 'playlist',
										'dimension' => '265x120',
										'file_name' => $value->playlist_file_name.'.'.$value->playlist_file_ext,
										'alt' => $value->playlist_name,	
										'title' => $value->playlist_name
									));?>			
								</div>
							<?php else:?>
								<div class="image">
									<?php echo image_asset('playlist/'.$value->playlist_file_name.'.'.$value->playlist_file_ext,'',array('width' => 265,'height' => 120));?>
								</div>
							<?php endif;?>
							<div class="info">
								<?php echo $value->playlist_name;?>
							</div>
						</a>
						</li>
					<?php endforeach;?>
				</ul>
			</div>
			<a href="javascript:void(0);" class="btn_arrow prev" id="cycleElementsLeft2"></a>
			<a href="javascript:void(0);" class="btn_arrow next" id="cycleElementsRight2"></a>
		</div>		
	</div>
	<!--เพลลิสย์ยอดนิยม-->
	<div class="block">
		<div class="header">
			<h2>สถานียอดนิยม</h2>
			<a href="<?php echo $playlist_url."category/hit";?>" class="readMore">all&raquo;</a>
		</div>
		<div id="slider3" class="sliderContent">
			<div class="slider">
				<ul>
					<?php foreach($dataPlaylistHit as $value):?>
						<li>
						<a class="_player" href="<?php echo $playlist_url.(empty($value->member_id) ? 'you2play/':'member/').$value->playlist_alias;?>" target="_blank">
							<?php if(empty($value->member_id)):?>
								<div class="image">
									<?php echo exec_image(array(
										'folder' => 'playlist',
										'dimension' => '265x120',
										'file_name' => $value->playlist_file_name.'.'.$value->playlist_file_ext,
										'alt' => $value->playlist_name,	
										'title' => $value->playlist_name
									));?>			
								</div>
							<?php else:?>
								<div class="image">
									<?php echo image_asset('playlist/'.$value->playlist_file_name.'.'.$value->playlist_file_ext,'',array('width' => 265,'height' => 120));?>
								</div>
							<?php endif;?>
							<div class="info">
								<?php echo $value->playlist_name;?>
							</div>
						</a>
						</li>
					<?php endforeach;?>
				</ul>
			</div>
			<a href="javascript:void(0);" class="btn_arrow prev" id="cycleElementsLeft3"></a>
			<a href="javascript:void(0);" class="btn_arrow next" id="cycleElementsRight3"></a>
		</div>		
	</div>	
</div>
<script type="text/javascript" language="javascript">
(function($) {
/*whatever jQuery stuff*/
	$(function(){
		//multipleElementsCycle
		$("#slider1").multipleElementsCycle({
			scrollCount: 3,
			show: 3,
			start: 0,
			prev: '#cycleElementsLeft1',
			next: '#cycleElementsRight1'
		});		
		$("#slider2").multipleElementsCycle({
			scrollCount: 3,
			show: 3,
			start: 0,
			prev: '#cycleElementsLeft2',
			next: '#cycleElementsRight2'
		});
		$("#slider3").multipleElementsCycle({
			scrollCount: 3,
			show: 3,
			start: 0,
			prev: '#cycleElementsLeft3',
			next: '#cycleElementsRight3'
		});	
		//modernSlider
 		var carousel = $("#modernSlider").waterwheelCarousel({
          	flankingItems: 2,
			autoPlay: 3000,
          	clickedCenter: function ($item) {
            	var id = $item.attr('id');
				var module = id.replace(/\-.+?$/g,""); 
				var alias = id.replace(/^.+?\-/g,""); 
				if(module == "You2Play"){
					var url = web_path+'you2play/'+alias;
					window.open(''+url+'','_playlist');
					return false;					
				} else if(module == "Member"){
					var url = web_path+'member/'+alias;
					window.open(''+url+'','_playlist');
					return false;					
				}
          	},
		    movedToCenter: function($newCenterItem) {
		      // $newCenterItem is a jQuery wrapped object describing the image that was clicked.
		      var imageID = $newCenterItem.attr('id'); // Get the HTML element "id" for this image. Let's say it's "tigerpicture"
			  //Hidden Info
			  $('#modernSlider .info').hide();
		      // Now that we have the ID of the image, we can use jQuery to show the content corresponding to the tigerpicture.
		      $('#'+imageID+'').parent().next().fadeIn(); // this will show the HTML element with id of "tigerpicture-information" on your site.
		    }						  
		});
		
        $('#modernSlider .prev').bind('click', function () {
          carousel.prev();
          return false
        });

        $('#modernSlider .next').bind('click', function () {
          carousel.next();
          return false;
        });														
	});	
})(jQuery);
</script>